<template>
	<!-- 用户页面 -->
	<view class="user-page">
		<!-- 用户登录页面 -->
		<view class="user-login-page">
			<!-- 用户账号盒子 -->
			<view class="user-login-name-box">
				<!-- 用户用户名 -->
				<view class="user-login-username">
					用户名
				</view>
				<!-- name输入框 -->
				<input type="text" v-model="inputUname" class="user-login-input-uname" placeholder="请输入账号" />
			</view>
			<!-- 用户密码盒子 -->
			<view class="user-login-psw-box">
				<!-- 密码 -->
				<view class="user-login-password">
					密码
				</view>
				<!-- 密码输入框 -->
				<input type="text" v-model="inputPsw" class="user-login-input-psd" placeholder="请输入密码" />
			</view>
			<!-- 登录按钮 -->
			<button class="login-btn" @click="handleBtnLogin">登录</button>
			<!-- 注册文本 -->
			<!-- <view class="user-register-text" @click="goRegisterPage">没有账号？立即注册</view> -->
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { sendLoginReq } from '../../api/index'
	const inputUname = ref('')
	const inputPsw = ref('')

	const handleBtnLogin = async () => {
		// 判断输入框是否为空
		if (!inputUname.value.trim() || !inputPsw.value.trim()) {
			uni.showToast({
				title: '账号或密码不能为空',
				icon: 'none'
			})
			return
		}
		// 发送登录请求接口所需的两个参数
		let data = {
			username: inputUname.value,
			password: inputPsw.value
		}
		// 发送请求获取后端的数据
		let result = await sendLoginReq(data)
		// 本地存储后端返回过来的三个数据
		uni.setStorageSync("token", result.token)
		uni.setStorageSync("refreshToken", result.refreshToken)
		uni.setStorageSync("userInfo", result.userInfo)
		// 登录成功后跳转到用户页面
		uni.switchTab({
			url: '/pages/index/user'
		})
	}
</script>

<style lang="scss">
	// 我的页面
	.user-page {
		height: 100vh;
		width: 100vw;

		// 用户登录页面
		.user-login-page {

			// 用户账号盒子
			.user-login-name-box {
				display: flex;
				width: px2rpx(343);
				height: px2rpx(24);
				padding: px2rpx(10) px2rpx(16);

				// 用户用户名
				.user-login-username {
					width: px2rpx(86);
					height: px2rpx(24);
					margin-right: px2rpx(12);
				}

				// name输入框
				.user-login-input-uname {
					width: px2rpx(244);
					height: px2rpx(24);
				}
			}

			// 用户密码盒子
			.user-login-psw-box {
				display: flex;
				width: px2rpx(343);
				height: px2rpx(24);
				padding: px2rpx(10) px2rpx(16);

				// 密码
				.user-login-password {
					width: px2rpx(86);
					height: px2rpx(24);
					margin-right: px2rpx(12);
				}

				// 密码输入框
				.user-login-input-psd {
					width: px2rpx(244);
					height: px2rpx(24);
				}
			}

			// 登录按钮
			.login-btn {
				background: linear-gradient(to right, #ff0000, #fff07d);
				border-radius: px2rpx(22);
				margin: px2rpx(16);
				color: rgba(248, 248, 248, 0.9);
				width: px2rpx(342);
				height: px2rpx(42);
			}

			// 注册文本
			.user-register-text {
				text-align: center;
				width: px2rpx(375);
				font-size: px2rpx(24);
				height: px2rpx(24);
				color: #b9b5b5;
			}
		}
	}
</style>